<template>
  <div>
    <!-- list-type 文件类型 -->
    <!-- action 必填 上传地址-->
    <!-- file-list 文件列表 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
    <!-- limit 最大允许上传个数 -->
    <!-- http-request 对应的函数有一个参数，用于上传的文件对象 覆盖默认的上传行为，可以自定义上传的实现 -->
    <!-- on-change   function(file, fileList)文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 -->
    <!-- on-preview 点击文件列表中已经上传的文件时的钩子 -->
    <el-upload
      :class="{ disupload: isdiaupload }"
      action="#"
      list-type="picture-card"
      :file-list="filelist"
      :limit="limit"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="uploadimgfn"
      :on-change="handchangefn"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog
      title="预览图片"
      :visible="showdialog"
      @close="showdialog = false"
    >
      <img width="100%" :src="imhurl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKID3xd6mFg2DC2shNtELErENQEnHF0Yrxsb',
  SecretKey: 'qqpswyzqW2UmslbEg1HORWVQm174pSvH'
})
export default {
  props: {
    limit: {
      type: Number
    }
  },
  data() {
    return {
      // dialogVisible: false,
      showdialog: false,
      imhurl: '',
      filelist: []
    }
  },
  methods: {
    handleRemove(file, fileList) {
      // file删除的文件对象
      // fileList删除之后剩余的图片数组
      console.log(file, fileList)
      // 方式一
      // this.filelist = [...fileList]
      // 方式二
      this.filelist = this.filelist.filter((item) => item.uid !== file.uid)
    },
    handlePictureCardPreview(file) {
      console.log(file)
      this.imhurl = file.url
      this.showdialog = true
    },
    uploadimgfn(obj) {
      // 自定义上传图片，在这里写axjx
      // 当beforeAvatarUpload返回return的值为false时不执行
      console.log(obj)

      const fileobj = this.filelist.find((item) => item.uid === obj.file.uid)
      fileobj.status = 'uploading'
      cos.putObject(
        {
          Bucket: 'hmhr24-1317671689' /* 填写自己的 bucket，必须字段 */,
          Region: 'ap-beijing' /* 存储桶所在地域，必须字段 */,
          Key:
            parseInt(Math.random() * 999999) +
            obj.file
              .name /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */,
          Body: obj.file, // 上传文件对象
          // progressData返回图片上传的进度
          onProgress: function (progressData) {
            console.log(JSON.stringify(progressData))
            // percentage：el-upload组件上传时圆环进度的百分比
            fileobj.percentage = parseInt(progressData.percent) * 100
          }
        },
        function (err, data) {
          if (err) {
            console.log('上传失败', err)
          } else {
            fileobj.url = 'https://' + data.Location
            setTimeout(() => {
              fileobj.status = 'success'
            }, 2000)

            console.log('上传成功')
          }
        }
        //          function(err, data) {
        //     console.log(err || data);
        // };
      )
    },
    handchangefn(file, fileList) {
      this.filelist = [...fileList]
      console.log(file, fileList)
    },
    // 上传文件的校验
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      // const isPNG = file.type === 'image/png'
      const types = ['image/jpeg', 'image/png']
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!types.includes(file.type)) {
        this.$message.error('上传头像图片只能是 JPG和PNG格式!')
        return false
      }
      // if (!isPNG) {
      //   this.$message.error('上传头像图片只能是 png 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    }
  },
  computed: {
    isdiaupload() {
      return this.filelist.length >= this.limit
    },
    isalluploadfilelist() {
      return this.filelist.every((item) => item.status === 'success')
    }
  }
}
</script>

<style scoped lang="scss">
.disupload {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
